<!DOCTYPE html>
<!-- 
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echo server - Websocket Demo</title>
    <style type="text/css">
    *{margin: 0; padding: 0;}
    body{
        color: #000;
        font-family: monospace;
        font-size: 16px;
    }
    #screen, #input{
        padding: 10px;
        border: 1px solid #666;
        width: 550px;
        margin: 0 auto;
    }
    #screen{
        margin-top: 10px;
        height: 300px;
        scroll: auto;
	overflow: scroll ;
    }
    #screen p{
        margin: 2px;
    }
    input, button{
        font-size: 20px;
        padding: 3px;
    }
    .client{
        color: green;
        font-weight: bold;
    }
    .server{
        color: red;
        font-weight: bold;
    }
    </style>
    <script src="jquery-1.11.0.js"></script>
    <script>

function htmlEncode(text){
   return text.replace(/&/g, '&amp').replace(/</g, '&lt;').replace(/>/g, '&gt;');  
}
        // Client here
        var socket = null;
        var uri = "ws://test.youku.com:9000";
        var color = 'green';
        var username = 'guest_'+$.now();

        function parseMessage(data){
            var jsonObj = JSON.parse(data);
            return jsonObj;
        }

        function serializeMessage(message,userId){
            var obj = {
                'username' : username,
                'color' : color,
                'message' : message,
                'userId' : userId
            }
			console.log('send',obj)
            return JSON.stringify(obj);
        }
        
        function renderMessage(message){
            return '<p><span style="font-weight: bold; color: '+ htmlEncode(message.color)+';">'+ htmlEncode(message.username)+'</span>: '+ htmlEncode(message.message)+'</p>';
        }

        function connect(){
            socket = new WebSocket(uri);
            if(!socket || socket == undefined) return false;
            socket.onopen = function(){
                writeToScreen('Connected to server '+uri);
            }
            socket.onerror = function(){
                writeToScreen('Error!!!');
            }
            socket.onclose = function(){
                $('#send').prop('disabled', true);
                $('#close').prop('disabled', true);
                $('#connect').prop('disabled', false);
                $('#username').prop('disabled', false);
                $('#color').prop('disabled', false);
                writeToScreen('Socket closed!');
            }
            socket.onmessage = function(e){
                console.log('serverGet : '+e.data);
                writeToScreen(e.data);
            }
            // Init user data
            username = $('#username').val();
            color = $('#color').val();
            // Enable send and close button
            $('#send').prop('disabled', false);
            $('#close').prop('disabled', false);
            $('#connect').prop('disabled', true);
            $('#username').prop('disabled', true);
            $('#color').prop('disabled', true);
        }
        function close(){
            socket.close();
        }
        function writeToScreen(msg){
            console.log('write screen');
            var screen = $('#screen');
            msg = parseMessage(msg);
            screen.prepend(renderMessage(msg));
            screen.animate({scrollTop: screen.height()}, 10);
        }
        function clearScreen(){
            $('#screen').html('');
        }
        function sendMessage(){
            if(!socket || socket == undefined) return false;
            var mess = $.trim($('#message').val());
            var userId = $.trim($('#userId').val());
            if(mess == '') return;
            socket.send(serializeMessage(mess,userId));
            // Clear input
            $('#message').val('');
        }
        $(document).ready(function(){
            $('#message').focus();
            $('#frmInput').submit(function(){
                sendMessage();
            });
            $('#connect').click(function(){
                connect();
            });
            $('#close').click(function(){
                close();
            });
            $('#clear').click(function(){
                clearScreen();
            });
        });
    </script>
</head>
<body>
    <form id="frmInput" action="" onsubmit="return false;">
        <div id="screen">
            <p>Demo realtime chatroom</p>
            <p>----------------------</p>
        </div>
        <div id="input">
            <input type="text" id="username" value="guest">
            <input type="text" id="color" value="green">
            <input type="text" id="userId" placeholder="userId">
            <input type="text" id="message" placeholder="Message here.."><br/>
            <button type="submit" id="send" disabled>Send</button>
            <button type="button" id="connect">Connect</button>
            <button type="button" id="close" disabled>Close</button>
            <button type="button" id="clear">Clear</button>
        </div>
    </form>
</body>
</html>
